<template>
  <link
    rel="stylesheet"
    href="https://at.alicdn.com/t/c/font_4682916_eus4j1hjo3.css"
  />
  <div class="box">
    <h1>todos</h1>
    <div class="content">
      <!-- 使用HeaderCom组件 -->
      <HanderCom />
      <ul>
        <!-- 使用TodoCom组件 -->
        <TodoCom />
      </ul>
      <!-- 使用FooterCom组件 -->
      <FooterCom />
    </div>
  </div>
</template>

<script setup>
import HanderCom from "./commponets/HanderCom.vue";
import TodoCom from "./commponets/TodoCom.vue";
import FooterCom from "./commponets/FooterCom.vue";
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 20px;
}
.iconfont {
  font-size: 25px;
}
.box {
  width: 300px;
  margin: 50px auto;
}

h1 {
  text-align: center;
  color: red;
}
</style>